<template>
    <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>课程列表</span>
          </div>
        </template>
        <div class="card-content">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="序号" width="80" />
                <el-table-column prop="name" label="课程名称" />
                <el-table-column prop="create_time" label="创建时间" />
                <el-table-column prop="visible" label="课程状态" >
                    <template #default="scope">
                        <el-switch v-model="scope.row.visible" @change="hadleSwitch(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="250">
                <template #default="scope">
                    <div>
                        <el-button @click="goEdit(scope.row.id)"><el-icon><Edit /></el-icon></el-button>
                        <el-button @click="goCourseResourse(scope.row.id)"><el-icon><Files /></el-icon></el-button>
                        <el-button @click="goResourceArr(scope.row.id)"><el-icon><Monitor /></el-icon></el-button>
                        <el-button @click="goClassroom(scope.row.id)"><el-icon><School /></el-icon></el-button>

                    </div>
                </template>
                </el-table-column>
              </el-table>
              <p v-if="course">正在{{operation}}{{course}}</p>
        </div>
      </el-card>
</template>

<script>
    import {Edit,Files,Monitor,School} from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    export default{
        data(){
            return {
                tableData:[
                    {
                        id:1,
                        name:"Java程序设计",
                        create_time:"2020-12-12",
                        visible:true
                    },
                    {
                        id:2,
                        name:"MySQL数据库技术",
                        create_time:"2020-12-12",
                        visible:false
                    },
                    {
                        id:3,
                        name:"Web前端开发基础",
                        create_time:"2020-12-12",
                        visible:true
                    },
                    {
                        id:4,
                        name:"Wed前端项目实战",
                        create_time:"2020-12-12",
                        visible:true
                    }
                ],
                operation:'',
                course:''
            }
        },
        components:{
        Edit,Files,Monitor,School
    },
    methods:{
        goEdit(id){
            this.operation = '编辑'
            console.log(id)
            this.course = this.tableData[id-1].name
        },
        goCourseResourse(id){
            this.operation = '资源管理'
            console.log(id)
            this.course = this.tableData[id-1].name
        },
        goResourceArr(id){
            this.operation = '资源编排'
            console.log(id)
            this.course = this.tableData[id-1].name
        },
        goClassroom(id){
            this.operation = '开课'
            console.log(id)
            this.course = this.tableData[id-1].name
        },
        hadleSwitch(item){
            if(item.visible){
                ElMessage({
    message: item.name + '课程现在是可见的',
    type: 'success'
  })
            }else{
                ElMessage({
    message: item.name + '课程现在是不可见的',
    type: 'warning'
  })
            }
        }
    }
    }
    
</script>

<style>
    .card-header{
        text-align: left;
    }
</style>